<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>实时性能</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="pragma" content="no-cache"/> 
	<meta http-equiv="cache-control" content="no-cache"/>
	<meta http-equiv="expires" content="0"/>  
	<%@ include file="../include/common.jsp"%>
	<%@ include file="../include/table.jsp"%>
	
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/style/default/bsm/sub_menu.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/style/default/bsm/perf/listPage.css" />
	
<script type="text/javascript" src="${pageContext.request.contextPath}/js/raty/js/jquery.raty.min.js"></script>
	
	
	<script type="text/javascript">
		var aoColumns ="";
		$(document).ready(function(){
			initColumns();
		    var oTable =$("#performances").dataTable({
				"bProcessing": true, 
				"bServerSide": true, 
				"sServerMethod": 'POST',
				"sAjaxSource":'prop-value!resPerformances.action?resTypeId=${id}&pId=${pId}',
				"bPaginate":false,
				"bSort": true,
				"bFilter":false, 
				"sPaginationType":'full_numbers',
				"aoColumns":eval(aoColumns),
				"fnCreatedRow":function( nRow, aData, iDataIndex ) { 
				},
				"oLanguage":{
					"sZeroRecords": "没有找到记录",
					"sInfo":"",
					"sInfoEmpty": ""
				}
			});
			
			
				//查看资源明细的点击事件
    		$("#performances tbody tr").live('click',function(e){
    				//显示资源明细
    			if ( oTable.fnIsOpen(this) ) {
    				oTable.fnClose( this ); 
    			}else{
    				oTable.fnOpen(this,fnFormatDetails(oTable,this),'details');
    			}
    		});
    		
    		setInterval('ajaxRefresh()', 30000);
		});
		
		//显示行信息
		function fnFormatDetails(oTable,tr){
			var aData = oTable.fnGetData( tr ); 
			var nodes = $(tr).find('td'); 
			var columns = 	$("#performances thead tr th[name='dynamicColumn']");
			var sOut = '<table cellpadding="5"  cellspacing="0" border="0" style="padding-left:50px;">'; 
				sOut += '<tr><td>指标名称</td><td>采集值</td><td>采集时间</td></tr>';
			$.each(columns,function(index,ob){
				sOut +='<tr><td>'+$(ob).text()+'</td><td>'+$(nodes[index+1]).text()+'</td><td>'+$(nodes[nodes.length-1]).text()+'</td></tr>';
			});
			sOut += '</table>'; 
			return sOut;
		}
		
		
		//构建列
		function initColumns(){
			$.ajax({
					type:'post',
					url:'prop-value!aoColumns.action',
					data:{id:'${id}'},
					global:false,
					async:false,
					cache:false,
					dataType:'json',
					success:function(data,textStatus){
						if(data.size <1 ){
							$('#resPropertyInfo').css('display','none');
							showResList();
						}else{
							$('#resPropertyInfo').css('display','');
							var tr = $('#performances thead tr');
							aoColumns +="[{'mDataProp':'resName'},";
							tr.append("<th>资源名称</th>");
							$.each(data.data,function(index,ob){
								var appendValue = (ob.dataUnit==null || ob.dataUnit=='')?ob.name:ob.name+"("+ob.dataUnit+")";
								tr.append("<th name='dynamicColumn'>"+appendValue+"</th>");
								aoColumns +="{'mDataProp':\"name"+index+"\"},";
							});
							tr.append("<th>采集时间</th>");
							aoColumns +="{'mDataProp':'collectTime'}]";
						}
					},
					error:function(entity,msg){
						getTopWin(window).getMessageBox().alert('服务器内部错误,请联系管理员','错误');
					}
			});
		}
		
		function showResList(){
			$('#reslistinfo').css('display','');
			$.ajax({
				type:'post',
				url:'prop-value!showSubTypeRes.action',
				data:{
					id:'${id}',
					pId:'${pId}'
				},
				cache:false,
				dataType:'json',
				success:function(data){
						var tbl = $('#invalidSessionList > tbody ');
						$.each(data.data,function(index,value){
						    var dataHtml = (index%2)==0?'<tr class="odd" >': '<tr class="even" >';
						    $.each(value,function(i,v){
						    	dataHtml +='<td>'+v+'</td>';
						    });
						    dataHtml +='</tr>';
							tbl.append(dataHtml);
						});
						
	                    var valueSpan = $("span:.health");
						
						$.each(valueSpan,function(index,ob){
							var id = $(ob).attr('id');
							var value = $(ob).attr('value');
							$('#'+id).raty({
								start: value/20,
								readOnly:  true,
								hintList:[ ''+value,''+value,''+value,''+value,''+value],
								path: '${pageContext.request.contextPath}/js/raty/img/'
							});
						});
						
				}
			});
		}
		
		//及时刷新数据
		function ajaxRefresh(){
			var oTable =$("#performances").dataTable();
			oTable.fnPageChange("first",true);
		}
	</script>
  </head>
  
  
  <body>
    <div  style="width:100%;height:5px;"></div>
    <div id="resPropertyInfo" class="common-column" >
   		 <h2 class="title-h2 m-0">子资源指标列表</h2>
	    <table width="100%"  id="performances" cellpadding="0" cellspacing="0" border="0" class="display"  >  
	    	<thead>
	    		<tr>
	    			
	    		</tr>
	    	</thead>
	    </table>
    </div>
    
     <div id="reslistinfo" class="common-column " style="clear:both;margin-top:5px;display:none">
		   <h2 class="title-h2 m-0">子资源列表</h2>
		   <table width='100%' cellpadding='0' cellspacing='0' border='0' class='display' id='invalidSessionList'>
		       <thead>
		             <tr>
			            <th width="20%">资源名称</th>
						<th width="20%">健康度</th>
						<th width="20%">IP</th>
						<th width="40%">描述</th>
		             </tr>
		       </thead>
		       <tbody>
		       </tbody>
		   </table>
	 </div>
    
    <div class="common-column" style="width:100%;height:10px;"></div>
  </body>
</html>
